<template>
  <div style="padding-top:1.5rem;">
    <TopNav style="background: #21b36b;color:#fff" title="WithDrawPage.wdqb" show_left="true"></TopNav>
    <div class="wallert-box">
      <div class="balance">{{user.balance}}</div>
      <ul class="opt">
        <li @click="handleClickShift">{{ $t('WithDrawPage.zz') }} <span style="float: right">|</span></li>
        <li @click="handleCLickMore">{{ $t('WithDrawPage.tx') }}</li>
      </ul>
    </div>
    <div>
      <div style="overflow: hidden;height:1.2rem;line-height: 1.2rem;">
        <div class="pull-left" style="width:40%">{{ $t('WithDrawPage.jqsxf') }}</div>
        <div class="pull-left" style="width:20%">{{ $t('WithDrawPage.zs') }}</div>
        <div class="pull-left" style="width:40%;">{{ $t('WithDrawPage.rq') }}</div>
      </div>
      <nut-leftslip v-for="(item, index) in data" :key="item.id" ref="leftslip">
        <div slot="slip-main" class="slip-main">
          <div style="width:40%"><b>{{item.money}}</b> <span v-if="item.server_money">({{item.server_money}})</span></div>
          <div style="width:20%">
            <span v-if="item.status==0">{{ $t('WithDrawPage.shz') }}</span>
            <span v-else-if="item.status==-1" style="color:red">{{ $t('WithDrawPage.jj') }}</span>
            <span v-else-if="item.status==1 || item.status==2 || item.status==4">{{ $t('WithDrawPage.dkz') }}</span>
            <span v-else>{{ $t('WithDrawPage.tg') }}</span>
          </div>
          <div style="width:40%;">
            {{item.created_at.substr(0,10)}}
            <div style="color:red;">{{item.reply}}</div>
          </div>
        </div>
        <div slot="slipbtns" class="slipbtns">
          <a href="javascript:;" @click="handleClickRemove(item.id,index)">{{ $t('WithDrawPage.sc') }}</a>
        </div>
      </nut-leftslip>
      <li v-if="loading">
        <div style="text-align: center;">
          <van-loading/>
        </div>
      </li>
      <div v-if="data.length==0">
        <EmptyBox text="WithDrawPage.zwjl"/>
      </div>
      <div class="bottom-tips">
        {{ $t('RechargePage.gy') }}<b>{{data.length}}</b>{{ $t('RechargePage.tjl') }}({{ $t('RechargePage.zxszj') }}300{{ $t('RechargePage.tjl') }})
      </div>
<!--      <div @click="handleCLickMore" class="plus-box">-->
<!--        <img src="../../static/img/plus.png" alt="">-->
<!--      </div>-->
      <nut-popup v-model="showDialog" closeable close-icon="cross" position="bottom">
        <div style="padding:1.3rem 0.5rem 0.5rem 0.5rem;text-align: center">
          <nut-textinput
            v-model="money"
            label="$t('WithDrawPage.txje')："
            :placeholder="'$t(\'WithDrawPage.zdktx\')'+(user.balance>withdraw_info.money?user.balance:0)"
            :clearBtn="true"
            :disabled="false"
          />
        </div>
        <div style="color: orange;">
          {{withdraw_info.text}}
        </div>
        <nut-button
          :disabled="loading"
          style="margin-top:0.5rem;background: #f36666;margin-bottom:0.5rem;"
          @click="showShortpwd"
        >{{ $t('WithDrawPage.tj') }}</nut-button>
      </nut-popup>
    </div>
    <nut-shortpassword 
    :visible="isShow"
    @close="shortpwdClose"
    type="center"
    ></nut-shortpassword>
  </div>
</template>

<script>
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";

export default {
  name: 'WithDrawPage',
    components: {
      TopNav,
        EmptyBox
    },
    data () {
    return {
      user:{},
      data:[],
      loading:false,
      isShow:false,
      showDialog:false,
        money:'',
        content:'',
        withdraw_info:'',
        paypassword:'',
    }
  },
    methods:{
        getUser(){
            let loading = this.$toast.loading();
            this.$axios.get(this.$api_url.user).then((res)=>{
                this.user = res.data;
            }).catch().then(()=>{
                loading.hide();
            })
        },
        getData(){
            this.loading = true;
            this.$axios.get(this.$api_url.withdraw_list).then((res)=>{
                this.data = res.data;
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.loading = false;
            })
        },
        getWithdrawInfo(){
            this.$axios.get(this.$api_url.withdraw_info).then((res)=>{
                this.withdraw_info = res.data;
            })
        },
        handleClickRemove(id){
            let loading = this.$toast.loading();
            this.$axios.post(this.$api_url.withdraw_del,this.$qs.stringify({
                id:id
            })).then((res)=>{
                if(res.data.code === 0){
                    this.$toast.success(res.data.msg);
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch ((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            });
        },
        handleClickShift(){
            location.href="/#/money_shift"
        },
        handleCLickMore(){
            if(!this.user.bank && !this.user.verify_detail){
                this.$toast.fail(this.$t('WithDrawPage.qxbdyxkhwszl'));
                return;
            }
            this.showDialog = true;
        },
        showShortpwd(){
            this.isShow = true;   
        },
        shortpwdClose(val){
            this.isShow = false;
            if(val){ 
                this.paypassword = val;
                 this.handleClickOk()
            }
            return
        },
        handleClickOk(){
            if(this.loading){
                return;
            }
            this.showDialog = false;
            if(this.money){
                this.loading = true;
                this.$axios.post(this.$api_url.withdraw_add,this.$qs.stringify({
                    money: this.money,
                    content: this.content,
                    pay_password:this.paypassword,
                })).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                        this.getData();
                    } else{
                        this.$toast.fail(res.data.msg);
                        if(res.data.code == -2){
                            location.href="/#/profile_detail";
                        }
                    }
                }).catch ((err)=>{
                    this.$toast.fail(err.message);
                }).then(()=>{
                    this.loading = false;
                });
            }
        },
        hasPasswrod(){
            this.loading =  true;
            this.$axios.get(this.$api_url.has_paypassword).then((res)=>{
                console.log(res);
                if(res.data.code == 0){
                    this.$dialog({
                    title: this.$t('WithDrawPage.zy'),
                    content: this.$t('WithDrawPage.qxszzfmmzcz'),
                    okBtnTxt:this.$t('WithDrawPage.ljsz'),
                    closeOnClickModal:false,
                    onOkBtn(event) {  //确定按钮点击事件
                      
                      this.close(); //关闭对话框
                      location.href="/#/paypassword"

                    },
                    onCancelBtn(event){
                      location.href="/#/profile"
                    },
                    
                    
                    
                  });
                    
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
               this.loading = false;
            });
        },
    },
    mounted() {
      this.hasPasswrod()
      this.getUser();
      this.getData();
      this.getWithdrawInfo();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .bottom-tips{
    margin-top:1rem;
  }
  .plus-box{
    position: absolute;
    right: 0.5rem;
    bottom:0.5rem;
  }
  .wallert-box{
    background: #21b36b;
    color: #fff;
  }
  .wallert-box .balance{
    height: 2rem;
    line-height: 2rem;
    font-size:1rem;
  }
  .opt{
    height: 1.6rem;
    overflow: hidden;
    font-size: 0.5rem;
    line-height: 1.6rem;
  }
  .opt li{
    text-align: center;
    width:50%;
    float:left;
  }
</style>
